<template>
  <eb-page>
    <eb-navbar large largeTransparent :title="$text('Built-in Theme')" eb-back-link="Back"></eb-navbar>
    <template v-if="builtIn">
      <f7-block-title medium>{{$text('Layout Themes')}}</f7-block-title>
      <f7-block strong>
        <f7-row>
          <f7-col width="50" class="bg-color-white demo-theme-picker" @click="setLayoutTheme('light')">
            <f7-checkbox checked disabled v-if="builtIn.layout === 'light'" />
          </f7-col>
          <f7-col width="50" class="bg-color-black demo-theme-picker" @click="setLayoutTheme('dark')">
            <f7-checkbox checked disabled v-if="builtIn.layout === 'dark'" />
          </f7-col>
        </f7-row>
      </f7-block>
      <f7-block-title medium>{{$text('Navigation Bars Style')}}</f7-block-title>
      <f7-block strong>
        <f7-row>
          <f7-col width="50" class="demo-bars-picker demo-bars-picker-empty" @click="setBarsStyle('empty')">
            <div class="demo-navbar"></div>
            <f7-checkbox checked disabled v-if="builtIn.bars === 'empty'" />
          </f7-col>
          <f7-col width="50" class="demo-bars-picker demo-bars-picker-fill" @click="setBarsStyle('fill')">
            <div class="demo-navbar"></div>
            <f7-checkbox checked disabled v-if="builtIn.bars === 'fill'" />
          </f7-col>
        </f7-row>
      </f7-block>
      <f7-block-title medium>{{$text('Color Themes')}}</f7-block-title>
      <f7-block strong>
        <f7-row>
          <f7-col width="33" v-for="(color, index) in colors" :key="index">
            <f7-button fill round small class="demo-color-picker-button" :color="color.toLowerCase()" @click="setColorTheme(color.toLowerCase())">{{$text(color)}}</f7-button>
          </f7-col>
          <f7-col width="33" />
          <f7-col width="33" />
        </f7-row>
      </f7-block>
      <f7-block-title medium>{{$text('Custom Color Theme')}}</f7-block-title>
      <f7-list>
        <f7-list-input type="colorpicker" :label="$text('HEX Color')" :placeholder="`${$text('e.g.')} #ff0000`" readonly :value="{hex: builtIn.customColor || themeColor}" :color-picker-params="{
          modules: ['initial-current-colors', 'sb-spectrum', 'rgb-sliders', 'hex', 'palette'],
          openIn: 'page',
          sliderValue: true,
          sliderValueEditable: true,
          sliderLabel: true,
          hexLabel: true,
          hexValueEditable: true,
          groupedModules: true,
          palette: [
            ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
            ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
            ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
            ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
            ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
            ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
            ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
            ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
          ],
          targetEl: '#color-theme-picker-color',
        }" @colorpicker:change="value => setCustomColor(value.hex)">
          <div slot="media" id="color-theme-picker-color" style="width: 28px; height: 28px; border-radius: 4px; background: var(--f7-theme-color)"></div>
        </f7-list-input>
      </f7-list>
    </template>
  </eb-page>
</template>
<script>
const colors = [
  'Red',
  'Green',
  'Blue',
  'Pink',
  'Yellow',
  'Orange',
  'Purple',
  'Deeppurple',
  'Lightblue',
  'Teal',
  'Lime',
  'Deeporange',
  'Gray',
  'Black',
];
import Vue from 'vue';
const ebPageContext = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageContext;
export default {
  mixins: [ ebPageContext ],
  data() {
    return {
      builtIn: null,
      themeColor: this.$$('html').css('--f7-theme-color').trim(),
      colors,
    };
  },
  computed: {
    loggedIn() {
      return this.$store.state.auth.loggedIn;
    },
    user() {
      return this.$store.state.auth.user;
    },
  },
  mounted() {
    // pageContext
    const contextParams = this.contextParams;
    // builtIn
    this.builtIn = contextParams.builtIn;
  },
  methods: {
    change() {
      // pageContext
      const contextParams = this.contextParams;
      if (contextParams.onChange) {
        contextParams.onChange(this.builtIn);
      }
    },
    setLayoutTheme(layout) {
      this.builtIn.layout = layout;
      this.change();
    },
    setBarsStyle(bars) {
      this.builtIn.bars = bars;
      this.change();
    },
    setColorTheme(color) {
      this.builtIn.color = color;
      this.builtIn.customColor = null;
      this.themeColor = this.$$('html').css('--f7-color-' + color).trim();
      this.change();
    },
    setCustomColor(color) {
      this.builtIn.customColor = color;
      this.change();
    },
  },
};

</script>
<style lang="less" scoped>
</style>
